<template>
  <ul class="treelist mb-3">
    <li :class="{'parent': root.children.length}" v-for="root in treenodes">
      <a class="treelist-item"><i :class="root.icon"></i> {{root.name}}</a>
      <children v-if="root.children.length" :parent="root"></children>
    </li>
  </ul>

</template>
<!--
  树形列表, 目前用于权限树展示 (是否还有其它用途?)
-->
<script>

  function toggle (e) {
    e.target.parentNode.classList.toggle('open')
  }

  export default {
    name: 'treeview',
    props: {
      treenodes: Array,
      checked: {
        type: Array,
        default: () => []
      }
    },
    methods: {toggle},
    components: {
      children: {
        name: 'children',
        props: ['parent', 'checked'],
        template: `<ul>
          <li :class="{'parent': child.children.length}"  v-for="child in parent.children">
            <a class="treelist-item"><i :class="child.icon"></i> {{child.name}} </a>
            <children v-if="child.children.length" :parent="child"></children>
          </li>
        </ul>`,
        methods: {toggle}
      }
    }
  }
</script>

<style>
  .treelist { list-style: none; margin: 0 0 30px; padding: 0 }
  .treelist > li:before, .treelist > li:after { display: none !important }
  .treelist ul { padding: 10px 10px 10px 60px; position: relative; list-style: none; margin: 0 }
  .treelist ul:before {
    background: #e2e2e2;
    position: absolute;
    height: calc(100% - 33px);
    content: " ";
    width: 1px;
    left: 30px;
    top: -.5rem;
  }
  .treelist li { position: relative }
  .treelist li:before,
  .treelist li:after {
    background: #e2e2e2;
    position: absolute;
    display: block;
    content: "";
    top: 20px;
  }
  .treelist li:before {
    background: #e2e2e2;
    position: absolute;
    display: block;
    content: "";
    top: 20px;
    height: 1px;
    width: 30px;
    left: -30px;
  }
  .treeview li:last-child::before {
  }
  .treelist li:after {
    border-radius: 50%;
    margin-top: -2px;
    left: -32px;
    height: 5px;
    width: 5px;
  }
  .treelist-item {
    border: 1px solid #ddd;
    margin-bottom: .5em;
    border-radius: 4px;
    position: relative;
    display: block;
    padding: 10px;
    color: #777;
  }
  .treelist-item:hover,
  .treelist-item:focus { text-decoration: none; background: #f6f6f6; color: #333 }
  .fa-link { position: absolute; margin-top: -6px; color: #ccc; right: 15px; top: 50% }
  .treelist-item:hover .fa-link,
  .treelist-item:focus .fa-link { color: #999 }
</style>